<template>
  <div class="layout">
    <section class="add">
      <el-form ref="form" :model="form" label-width="120px" :rules="rules" status-icon>
        <el-form-item label="学院名称" prop="name">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="简介" prop="introduction">
          <el-input v-model="form.introduction"></el-input>
        </el-form-item>
        <el-form-item label="学院成立日期" prop="established">
          <el-date-picker  type="date" format="yyyy-MM-dd" value-format="yyyy-MM-dd" placeholder="选择日期" v-model="form.established"></el-date-picker>
        </el-form-item>
        <el-form-item label="教职员工数量" prop="numFaculty">
          <el-input v-model="form.numFaculty"></el-input>
        </el-form-item>
        <el-form-item label="学生人数" prop="numStudents">
          <el-input v-model="form.numStudents"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit('form')" icon="el-icon-a-07">立即创建</el-button>
          <el-button type="danger" @click="cancel()" icon="el-icon-a-022">取消</el-button>
        </el-form-item>
      </el-form>
    </section>
  </div>
</template>

<script>
export default {
  name: "addCollege",
  data(){
    return{
      form: { //表单数据初始化
        name: null,
        introduction: null,
        established: null,
        numFaculty: null,
        numStudents: null,
      },
      rules:{
        name:[
          {required:true,  trigger: 'blur',message:'学院名称不能为空' },
        ],
        introduction:[
          {required:true,  trigger: 'blur',message:'简介不能为空' },
        ],
        established: [
          {required: true, message: '请选择日期', trigger: 'change' }
        ],
        numFaculty:[
          {required:true,  trigger: 'blur',message:'教职员工数量不能为空' },
        ],
        numStudents:[
          {required:true,  trigger: 'blur',message:'学生人数不能为空' },
        ]
      }
    };
  },
  methods: {
    onSubmit(formName) { //数据提交
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$axios({
            url: '/api/college/add',
            method: 'post',
            data: {
              ...this.form
            }
          }).then(res => {
            if(res.data.code == 200) {
              this.$message({
                message: '添加学院成功',
                type: 'success'
              })
              this.$router.push({path: '/collegeManage'})
            }
          })
        } else {
          console.log('数据不合格');
          return false;
        }
      });
    },
    cancel() { //取消按钮
      this.form = {}
    },

  }
}

</script>
<style scoped lang="less">
.layout{
  padding: 0 40px;
  width: 400px;
}
</style>
